<template>
  <lay-menu
    v-model:selectedKey="selectKey"
    v-model:openKeys="openKeys"
    :collapse="collapse"
    :tree="isTree"
    :indent="true"
    theme="light"
    style="background: #ffffff; height: 100%"
  >
    <lay-sub-menu :id="item.id" v-for="item in menu_infos">
      <template #icon>
        <lay-icon :type="item.icon"></lay-icon>
      </template>
      <template #title> {{ item.title }} </template>
      <lay-menu-item :id="unit.id" v-for="unit in item.child_menus">
        <template #title>
          <span style="margin-left: 30px">{{ unit.title }}</span>
        </template>
      </lay-menu-item>
    </lay-sub-menu>
  </lay-menu>
</template>

<script lang="ts">
export default {
  name: "GlobalMenu",
};
</script>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import {onMounted, ref, watch} from "vue";


const {collapse, system} = defineProps({
  collapse: {type: Boolean, default: ref(true)},
  system: {type: String, default: ref('dataMock')}
});

const route = useRoute();
const router = useRouter();
const selectKey = ref(route.path);
const openKeys = ref(["1", "2", "3"]);
const isTree = ref(true);

const dataMenus = ref([
    {id: '1', icon: 'layui-icon-set', title: '配置管理', child_menus: [
        {id: '/config/source', icon: 'layui-icon-link', title: '数据库管理'},
        {id: '/config/rules', icon: 'layui-icon-template', title: '仿真规则库'},
        ]
    },
    {id: '2', icon: 'layui-icon-template-one', title: '仿真管理', child_menus: [
        {id: '/scene/SqlRelation', icon: 'layui-icon-template', title: 'SQL血缘'},
        {id: '/scene/create', icon: 'layui-icon-template', title: '仿真场景'},
        // {id: '/scene/create/group', icon: 'layui-icon-template', title: '场景组'}
        ]
    },
    // {id: '3', icon: 'layui-icon-engine', title: '数据管理', child_menus: [
    //     {id: '/data/basic', icon: 'layui-icon-file', title: '基础数据'},
    //     {id: '/date/update', icon: 'layui-icon-file', title: '数据更新'},
    //     {id: '/date/recover', icon: 'layui-icon-file', title: '数据回退'}
    //     ]
    // },
    // {id: '4', icon: 'layui-icon-chart-screen', title: '运维管理', child_menus: [
    //     {id: '/operate/count', icon: 'layui-icon-chart', title: '应用统计'},
    //     {id: '/operate/log', icon: 'layui-icon-chart', title: '监控日志'}
    //     ]
    // },
    // {id: '5', icon: 'layui-icon-group', title: '系统管理', child_menus: [
    //     {id: '/system/user', icon: 'layui-icon-username', title: '     用户管理'},
    //     {id: '/system/role', icon: 'layui-icon-username', title: '     角色管理'}
    //     ]
    // },
]);

const marketMenus = ref([
    {id: '1', icon: 'layui-icon-headset', title: '行情源', child_menus: [
        // {id: '/record/config', icon: 'layui-icon-file', title: '连接配置(上游)'},
        // {id: '/record/receive', icon: 'layui-icon-file', title: '录制行情消息'},
        {id: '/record/encode', icon: 'layui-icon-link', title: '行情文件'},
        {id: '/record/records', icon: 'layui-icon-template', title: '分布记录'},
        {id: '/record/news', icon: 'layui-icon-template', title: '行情消息'},
        ]
    },
    {id: '2', icon: 'layui-icon-speaker', title: '行情播放', child_menus: [
        {id: '/play/strategy', icon: 'layui-icon-template', title: '推送策略'},
        {id: '/play/task', icon: 'layui-icon-template', title: '客户端'},
        {id: '/play/job', icon: 'layui-icon-template', title: '定时任务'},
        ]
    },
    {id: '3', icon: 'layui-icon-set-sm', title: '系统设置', child_menus: [
        {id: '/config/params', icon: 'layui-icon-chart', title: '参数列表'},
        // {id: '/config/document', icon: 'layui-icon-file', title: '远程文档'}
        ]
    },
]);

const excelCaseMenus = ref([
    {id: '1', icon: 'layui-icon-template', title: 'Excel用例上传', child_menus: [
        {id: '/excel/uploadExcel', icon: 'layui-icon-link', title: '上传Excel用例'},
        {id: '/excel/configEdit', icon: 'layui-icon-link', title: '上传用例配置'},
        ]
    },
    {id: '2', icon: 'layui-icon-diamond', title: '反洗钱5.0', child_menus: [
        {id: '/aml/change', icon: 'layui-icon-link', title: '环境管理'},
        {id: '/aml/company', icon: 'layui-icon-link', title: '公司号维护'},
        {id: '/aml/AIHelper', icon: 'layui-icon-link', title: 'AI测试助手'},
        ]
    },
    {id: '3', icon: 'layui-icon-table', title: 'AI用例生成', child_menus: [
        {id: '/aiCase/aiExchange', icon: 'layui-icon-link', title: '测分转自动化'},
        {id: '/aiCase/create', icon: 'layui-icon-link', title: '勾稽用例生成'},
        {id: '/aiCase/hgRiskCreate', icon: 'layui-icon-link', title: '合规指标用例生成'},
        {id: '/aiCase/fxqRiskCreate', icon: 'layui-icon-link', title: '反洗钱5.0指标用例生成'},
        {id: '/aiCase/LimitCreate', icon: 'layui-icon-link', title: '限额管理用例生成'},
        {id: '/aiCase/manualCase', icon: 'layui-icon-link', title: '手工用例批量生成'},
        ]
    },
    // {id: '4', icon: 'layui-icon-cols', title: '测试场景生成', child_menus: [
    //     {id: '/case/create', icon: 'layui-icon-link', title: '场景生成'},
    //     ]
    // },
    // {id: '5', icon: 'layui-icon-table', title: '统计报表', child_menus: [
    //     {id: '/plat/configTables', icon: 'layui-icon-link', title: '报表查询配置'},
    //     {id: '/plat/countTables', icon: 'layui-icon-link', title: '下载统计报表'},
    //     ]
    // },

])


const systemName = ref('');

const menu_infos = ref();


onMounted(() =>{
  systemName.value = system;
  if(systemName.value === 'dataMock'){
    menu_infos.value = dataMenus.value;
  }else if(systemName.value === 'excelCase'){
    menu_infos.value = excelCaseMenus.value;
  }else {
    menu_infos.value = marketMenus.value;
  }
});

watch(systemName, (newValue, preValue) => {
  console.log('watch systemName')
  console.log(newValue)
  console.log(preValue)
  if(newValue !== preValue){
    if(systemName.value === 'dataMock'){
      menu_infos.value = dataMenus.value;
    }else if(systemName.value === 'excelCase' ){
      menu_infos.value = excelCaseMenus.value;
    }else {
      menu_infos.value = marketMenus.value;
    }
  }
});

watch(route, (val) => {
  selectKey.value = route.path;
});

watch(selectKey, (val) => {
  router.push(val);
});

</script>

<style>
.layui-nav-tree .layui-this {
  background-color: #1e9fff;
  font-size: large;
  font-weight: bolder;
}
</style>